<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0"
    />
    <style type="text/css">
      html,
      body {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        margin: 0;
        padding: 0;
      }
      button {
        display: block;
        width: 100%;
        padding: 20px;
        font-size: 30px;
      }
      #image {
        display: block;
        width: 100%;
      }
      #video {
        display: block;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <script src="./jsbridge.js"></script>
    <script type="text/javascript">
      function toHttpLocalUrl(file) {
        return "http://file.local?file=" + encodeURI(file)
      }

      function onClickButton(button) {
        var img = document.getElementById("image")
        var video = document.getElementById("video")
        switch (button.innerText) {
          case "Camera.takePicture":
            JSBridge.Camera.takePicture((result) => {
              if (result.success) {
                JSBridge.UI.toast(result.file)
                img.src = toHttpLocalUrl(result.file)
              }
            })
            break
          case "Camera.takeVideo":
            JSBridge.Camera.takeVideo((result) => {
              if (result.success) {
                JSBridge.UI.toast(result.file)
                video.innerHTML = "<source src='" + toHttpLocalUrl(result.file) + "' type='" + result.type + "'>"
              }
            })
            break
          case "Image.pickPhotos":
            JSBridge.Image.pickPhotos((result) => {
              if (result.success) {
                JSBridge.UI.toast(result.file)
                if (result.type.indexOf('video/') === 0) {
                  video.innerHTML = "<source src='" + toHttpLocalUrl(result.file) + "' type='" + result.type + "'>"
                } else {
                  img.src = toHttpLocalUrl(result.file)
                }
              }
            })
            break
        }
      }
    </script>
    <button onclick="onClickButton(this)">Camera.takePicture</button>
    <button onclick="onClickButton(this)">Camera.takeVideo</button>
    <button onclick="onClickButton(this)">Image.pickPhotos</button>
    <img id="image">
    <video id="video" controls></video>
  </body>
  </body>
</html>
